<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_全屏遮罩层</title>
    <style>
        .mask {
            background-color: rgba(0,0,0,.3);
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
<div class="mask"></div>
<div>
    lorem*60
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, non recusandae. Accusantium aliquam atque
        corporis deleniti dolor doloribus eos, exercitationem explicabo in, nam obcaecati omnis quidem recusandae rem
        rerum, vitae.
    </div>
    <div>Culpa dignissimos eligendi nostrum tenetur! Ab aliquam aliquid amet aperiam beatae cupiditate deserunt ducimus
        ea excepturi explicabo id modi officia, praesentium quae sed soluta temporibus vero, voluptate voluptatem
        voluptatum! Dolores.
    </div>
    <div>At debitis dignissimos dolore eum fugiat hic impedit laudantium nam natus non odio officia optio perferendis
        quaerat quibusdam rem sapiente sequi velit veritatis, voluptates! Atque autem dolor eos et officiis.
    </div>
    <div>Consequatur consequuntur deserunt dolor dolorum eum impedit in, inventore itaque laboriosam minima modi
        obcaecati quaerat quos, sed soluta ut vero voluptatibus. Alias doloremque fuga impedit mollitia, quod rerum
        voluptas voluptatem.
    </div>
    <div>Aperiam, asperiores aspernatur aut cumque debitis doloremque doloribus eaque eius illum impedit ipsam
        laboriosam magnam maiores maxime molestiae necessitatibus neque nobis odit optio placeat provident quidem
        repellendus repudiandae sit sunt?
    </div>
    <div>Consequatur eaque eos quaerat soluta, vero voluptate voluptatum. Alias commodi debitis dignissimos et facilis
        fugit id impedit mollitia nesciunt odit placeat quaerat quas quibusdam quis rem, rerum sequi soluta voluptates!
    </div>
    <div>Ab amet atque aut consequuntur cumque deleniti dolores dolorum, earum eligendi expedita harum laboriosam
        mollitia numquam obcaecati pariatur porro quaerat quia quos sapiente sint veritatis vero voluptates voluptatibus?
        Earum, error?
    </div>
    <div>Aliquid dicta dolorum, ducimus eius eligendi esse et exercitationem facilis in ipsam itaque nihil officia omnis
        possimus quaerat veritatis vero vitae? Ab aperiam aspernatur consequatur doloremque est odit, possimus quos?
    </div>
    <div>Aliquam consectetur consequuntur, deleniti distinctio dolore ex exercitationem in incidunt iure laborum quaerat
        quam quasi sed totam vel veniam voluptates. Blanditiis, laboriosam officiis! Aliquam consequuntur eveniet, in
        optio quas sint.
    </div>
    <div>Ad assumenda autem cumque doloremque ducimus est et fugit illo, ipsum iure iusto labore laudantium libero nam
        nemo officiis perspiciatis placeat quibusdam, sint sit ullam unde velit, veniam veritatis voluptatum!
    </div>
    <div>Ad alias consectetur deserunt dignissimos distinctio doloribus ducimus enim, ex exercitationem facilis fugit
        ipsa ipsam labore laboriosam laborum, nobis possimus praesentium qui quo quos repudiandae sed ullam vero. Iure,
        quibusdam.
    </div>
    <div>Ad aliquam asperiores deserunt dignissimos esse ex facere fugiat id inventore ipsum iste labore, libero magni
        minus modi nam necessitatibus pariatur porro quas quidem quod reprehenderit totam vel veniam voluptas?
    </div>
    <div>Ad adipisci at distinctio dolores earum esse facilis hic in ipsa ipsam iusto magni minima nisi nobis nostrum
        officia optio qui quia quibusdam, quo rerum sapiente sed sequi suscipit tenetur.
    </div>
    <div>Ab aperiam architecto consequuntur dignissimos doloremque ducimus earum exercitationem, fuga fugiat fugit
        impedit iure labore minus numquam obcaecati odio omnis quae quam quisquam ratione reiciendis sit veniam vero
        voluptate voluptatum.
    </div>
    <div>Dolorum in, voluptate. Nulla officia, recusandae. Amet beatae ex expedita impedit laboriosam necessitatibus
        quaerat quisquam rem vero voluptate! Adipisci et ipsa ipsam natus soluta tenetur voluptates! Id nam pariatur
        veniam!
    </div>
    <div>A accusamus aliquam architecto at consectetur debitis deleniti deserunt dolor eius eligendi error id illo
        impedit, ipsam nesciunt nihil nobis non perferendis possimus praesentium quis quod quos, repellat tempore veniam?
    </div>
    <div>Amet beatae consequuntur corporis dolorum eligendi ex, explicabo, illum ipsam iste itaque labore laborum porro,
        quibusdam sint tempore veniam vero voluptates? Aperiam assumenda corporis cum eaque minima molestiae, quod
        reiciendis.
    </div>
    <div>Cum eligendi ipsa maiores omnis quas? Ab autem ipsam necessitatibus officia quibusdam quidem quod repellat
        tempora. Adipisci earum, eos error magni neque rem veritatis. Laboriosam minima quod quos similique tempora.
    </div>
    <div>Accusamus aut deleniti dolores illum ipsam itaque maxime nam officiis perferendis rerum? A adipisci autem
        beatae cupiditate error est, ex fuga in obcaecati omnis, placeat, quidem tempore veniam vitae voluptate?
    </div>
    <div>Animi aspernatur consequatur debitis dolore dolorem dolorum eaque eos exercitationem hic illo iusto molestiae
        mollitia nam odio officiis omnis pariatur porro quibusdam, quidem ratione rem repellat reprehenderit sint soluta
        unde.
    </div>
    <div>Architecto at atque cumque distinctio dolorem dolorum eos error ex expedita, facere impedit ipsam modi mollitia
        natus nisi odio officia provident quae qui quo quos ratione, sit ullam vitae voluptate.
    </div>
    <div>Delectus placeat sunt tempora. Amet animi atque deleniti ea et expedita minima, mollitia praesentium quam,
        quasi rem, saepe voluptate. At corporis eos nam reiciendis repellendus, suscipit ut. Dolorum, minima vero!
    </div>
    <div>A animi earum eligendi fugit hic mollitia necessitatibus nisi velit voluptatum? Aperiam architecto blanditiis
        consectetur delectus dignissimos doloribus esse facere, illo incidunt laboriosam, necessitatibus quibusdam, quidem
        quos ullam vel vero.
    </div>
    <div>Accusamus beatae dicta distinctio esse est hic inventore labore similique tempora vitae. Fugiat ipsa, totam. Ab
        ad adipisci, animi, at deserunt dolorem dolores ea, eius harum natus porro repudiandae suscipit.
    </div>
    <div>Atque blanditiis corporis deserunt dignissimos dolore dolores ea eaque esse eum ex fugiat harum illo ipsa ipsum
        libero maiores necessitatibus nesciunt nobis nulla officia omnis, placeat quo repellendus sequi temporibus.
    </div>
    <div>Libero nostrum pariatur quidem tempore? Assumenda deserunt dignissimos, distinctio esse est ex facere fugit
        laboriosam maxime, minima molestias odio placeat, provident quasi quod vero voluptatem? Facere minima neque
        nostrum sed?
    </div>
    <div>Aliquid assumenda at commodi consequatur debitis dicta et exercitationem fuga, impedit ipsam iure maiores
        maxime mollitia neque nostrum porro quia quos repellat, reprehenderit sed similique tempora tenetur velit
        voluptate voluptates!
    </div>
    <div>Deleniti dignissimos dolore dolorum explicabo, fuga fugiat ipsam laboriosam minus natus nemo nulla quae
        reiciendis sequi tempore, vitae voluptatem voluptates? Consectetur deserunt ex, ipsa perspiciatis quo ratione sed
        tempore voluptatem.
    </div>
    <div>Doloribus eos, repellat! Atque nihil placeat quod reiciendis. A, cupiditate earum ex excepturi labore odio
        omnis pariatur possimus suscipit vel! Ab deleniti maxime ullam unde? Esse expedita repellendus ullam unde?
    </div>
    <div>Aperiam excepturi modi nam repudiandae. A beatae dolor earum facilis, illo, inventore ipsam iste itaque modi
        porro quisquam repellendus veritatis! A adipisci dolorem ducimus, et facilis modi nesciunt quasi voluptate!
    </div>
    <div>A assumenda atque aut corporis, cumque debitis distinctio, earum laudantium libero officia repudiandae, sed
        similique tempora unde vero! Accusantium alias commodi consectetur debitis doloremque dolorum perspiciatis quaerat
        ut vel voluptatum!
    </div>
    <div>Ad aperiam blanditiis deleniti doloribus est eveniet, impedit in itaque iusto maxime omnis pariatur perferendis
        perspiciatis saepe tempore, temporibus totam. Alias animi dolorem doloribus eos fugiat officia, quibusdam quos
        voluptate?
    </div>
    <div>Cum cupiditate, ducimus eius enim impedit molestias quaerat repudiandae. Accusamus alias architecto culpa cum
        error illo illum in minus nemo nobis nulla placeat quae quisquam reiciendis temporibus ullam veritatis, vero?
    </div>
    <div>Accusantium blanditiis corporis dolore esse, eum maxime quaerat. Accusantium hic provident sapiente sit. Animi
        architecto autem debitis dolorum earum est et fugit id ipsum modi, neque officiis possimus similique soluta.
    </div>
    <div>Ad commodi consequatur consequuntur cupiditate distinctio dolor dolores error ex excepturi iure iusto
        laboriosam mollitia nisi nulla odio omnis pariatur porro quidem quis, quos repellendus repudiandae sit tempora
        tempore ullam!
    </div>
    <div>Aliquam consectetur cumque dolores ducimus expedita molestias nihil, quaerat, quia quis quo quod, rem sapiente
        tempora velit voluptatibus. Alias, doloribus ducimus eligendi ex fugiat ipsam mollitia obcaecati quaerat quisquam
        tenetur?
    </div>
    <div>Ab ad asperiores at atque consequuntur dolorem doloribus, eaque, earum eveniet facere iusto labore libero magni
        nemo nesciunt nisi omnis pariatur placeat quas quibusdam rem repellendus soluta tempore unde, voluptas!
    </div>
    <div>Accusamus architecto aspernatur atque autem culpa dignissimos dolor dolores excepturi exercitationem impedit
        labore laborum libero nisi nostrum omnis optio pariatur praesentium quae quod quos rerum sapiente sed, voluptas
        voluptatibus voluptatum.
    </div>
    <div>Dolores doloribus explicabo fuga harum illo, itaque laboriosam minima neque nobis pariatur reprehenderit,
        voluptate voluptatibus! At cupiditate dolorem enim facere fuga, id impedit ipsam iure magni maxime possimus, rem
        velit!
    </div>
    <div>Aspernatur atque beatae delectus eaque earum esse eum expedita, fugit hic ipsa, maiores maxime perspiciatis
        quaerat quam qui, quisquam sequi totam voluptatem! Delectus dignissimos, earum fugiat fugit illo vitae voluptas?
    </div>
    <div>Blanditiis consectetur dolor, id maxime nobis nostrum quo rem repellendus rerum veniam? Aliquam asperiores
        consectetur cumque doloremque ducimus ipsum iste itaque, laudantium minus optio placeat possimus, quam quibusdam
        similique, tenetur!
    </div>
    <div>At ea fugiat fugit hic magni recusandae soluta! At autem incidunt laborum mollitia quia, temporibus! Ad autem
        consequuntur esse fuga in maiores maxime nemo pariatur praesentium provident quo, repellat voluptatem.
    </div>
    <div>Distinctio fugit magni nulla repudiandae rerum! A aspernatur assumenda autem dolores eaque fugiat ipsam
        laudantium magnam maiores non! Aut dolor et id labore minus natus non perferendis quos rerum vitae.
    </div>
    <div>Aliquam aperiam, culpa cupiditate deleniti distinctio dolores facere incidunt ipsum natus nostrum, nulla
        pariatur quae quaerat quam quidem sequi veniam. Consectetur deserunt dolor ea expedita minus quas quibusdam
        repellendus, reprehenderit.
    </div>
    <div>Ad aliquam architecto corporis, doloremque, ea eius et explicabo fuga inventore ipsam labore maxime minima
        nostrum officiis omnis, pariatur perspiciatis quaerat saepe similique sit sunt tempore voluptatum! Officia, sequi
        sit.
    </div>
    <div>Corporis deserunt dolor eligendi eum magni modi mollitia omnis quibusdam. Adipisci assumenda cumque ipsa,
        nostrum reiciendis rem veniam. Consequatur dolorem doloremque eos minus officiis omnis perferendis provident quae
        quia sunt.
    </div>
    <div>Dignissimos minima possimus voluptatem. Doloremque enim eos explicabo natus odio, officia quidem. Adipisci
        dolore ipsum itaque maxime modi perferendis quas quia quidem quod repellendus tempore temporibus, unde, ut
        voluptatem voluptates.
    </div>
    <div>Accusamus accusantium, animi assumenda aut consectetur, cupiditate delectus dolore doloremque excepturi fuga
        iure laboriosam laudantium minus nemo nostrum obcaecati placeat porro provident quae quasi repellendus sit tempore
        temporibus tenetur totam.
    </div>
    <div>Ab consectetur ducimus esse ex, in minima nobis saepe sapiente sed sunt. A, beatae consequuntur dignissimos est
        illum in modi nisi obcaecati placeat, quae quas quidem, quis sequi velit veniam?
    </div>
    <div>Culpa ea maxime sapiente? Aliquam, aliquid assumenda consequuntur culpa cum dolorem eos et eum eveniet iusto
        laborum modi molestias nam nihil obcaecati quaerat quasi quis quisquam quod ratione reprehenderit sapiente!
    </div>
    <div>Alias architecto cum cupiditate dolore, doloremque dolores eaque error esse et excepturi facere fugiat ipsa
        labore necessitatibus nostrum, quia ratione saepe similique tenetur ullam unde veniam vero! Dolorum eos, veniam.
    </div>
    <div>Accusamus ad, alias animi assumenda ex hic inventore, iusto maxime officia, quia quos soluta. Delectus deleniti
        distinctio, doloribus eius magni molestiae necessitatibus nostrum officia, omnis placeat quia reiciendis sapiente
        sed.
    </div>
    <div>Aliquid, dolor fuga hic ipsum laboriosam maxime minus nam nulla officiis perspiciatis, quisquam repellat saepe
        ut veniam veritatis! A accusamus consectetur culpa eius libero magnam maxime quaerat recusandae saepe vel.
    </div>
    <div>At deleniti enim magnam natus nisi odit placeat quaerat quasi suscipit vel. Assumenda consequuntur cumque
        cupiditate est incidunt molestias non nostrum quaerat soluta vel. Asperiores autem culpa eius minima nobis.
    </div>
    <div>Ab asperiores, corporis dolorum eaque excepturi itaque natus nemo perspiciatis! Commodi doloribus et excepturi
        facilis inventore libero natus necessitatibus quaerat quis voluptate! Ab, doloremque pariatur quae quo temporibus
        totam voluptatem.
    </div>
    <div>Architecto asperiores beatae cum cumque distinctio esse, eveniet fugit ipsam, itaque maiores nihil omnis
        possimus quaerat quas quidem quos sapiente sunt suscipit velit veritatis. Asperiores dignissimos maxime nam porro
        soluta!
    </div>
    <div>Corporis ducimus ipsum itaque magni quam repellendus totam unde? A ad amet at consectetur dicta esse expedita
        hic, incidunt inventore laudantium, magni nesciunt officiis quae quidem similique suscipit tenetur, ut?
    </div>
    <div>At deleniti, eveniet laboriosam molestiae odio praesentium quia saepe sed! Accusamus assumenda atque, cumque
        debitis ex harum molestiae perspiciatis provident quasi quos ratione, reiciendis, tempora totam unde veniam vitae
        voluptatum?
    </div>
    <div>A, adipisci delectus dignissimos distinctio dolore earum ex in laborum, maxime nesciunt non odit, quae quod
        quos ratione rerum voluptatum? Aspernatur dolorum explicabo molestiae perferendis quae quidem, repellendus tempore
        voluptatibus!
    </div>
    <div>Consequatur delectus deserunt, dolorem fugit illum ipsam nihil omnis? Ab esse illum molestiae mollitia sit
        tempora unde. Explicabo, quisquam, voluptates. Aperiam consequuntur dolorem eum fugiat iure molestiae sunt
        voluptatem voluptatibus?
    </div>
</div>
</body>
</html>